<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		<!-- 导入日期组件的包 -->
		<script type="text/javascript" src="../lib/datetimepicker/moment-with-locales.min.js" ></script>
		<script type="text/javascript" src="../lib/datetimepicker/bootstrap-datetimepicker.min.js" ></script>
		<link rel="stylesheet" href="../lib/datetimepicker/bootstrap-datetimepicker.min.css" />
	</head>
	<body>

<h1>Bootstrap 日期控件</h1>
	
<div class="row">  
    <div class='col-sm-6'>  
        <div class="form-group">  
            <label>选择日期：</label>  
            <!--指定 date标记-->  
            <div class='input-group date' id='datetimepicker1'>  
                <input type='text' class="form-control" readonly="true" />  
                <span class="input-group-addon">  
                    <span class="glyphicon glyphicon-calendar"></span>  
                </span>  
            </div>  
        </div>  
    </div>  
    <div class='col-sm-6'>  
        <div class="form-group">  
            <label>选择日期+时间：</label>  
            <!--指定 date标记-->  
            <div class='input-group date' id='datetimepicker2'>  
                <input type='text' class="form-control" />  
                <span class="input-group-addon">  
                    <span class="glyphicon glyphicon-calendar"></span>  
                </span>  
            </div>  
        </div>  
    </div>  
</div>  
<script>
	$(function(){  
	    $('#datetimepicker1').datetimepicker({  
	        format: 'YYYY-MM-DD',  
	        defaultDate:'2018-01-01',
	        locale: moment.locale('zh-cn')  
	    });  
	    $('#datetimepicker2').datetimepicker({  
	        format: 'YYYY-MM-DD hh:mm',  
	        defaultDate:new Date(),
	        locale: moment.locale('zh-cn')  
	    });  
});  
</script>


<div class="row">  
    <div class='col-sm-6'>  
        <div class="form-group">  
            <label>选择开始时间：</label>  
            <!--指定 date标记-->  
            <div class='input-group date' id='datetimepicker3'>  
                <input type='text' class="form-control" />  
                <span class="input-group-addon">  
                    <span class="glyphicon glyphicon-calendar"></span>  
                </span>  
            </div>  
        </div>  
    </div>  
    <div class='col-sm-6'>  
        <div class="form-group">  
            <label>选择结束时间：</label>  
            <!--指定 date标记-->  
            <div class='input-group date' id='datetimepicker4'>  
                <input type='text' class="form-control" id="dp4" />  
                <span class="input-group-addon" id="dp42">  
                    <span class="glyphicon glyphicon-calendar"></span>  
                </span>  
            </div>  
        </div>  
    </div>  
</div> 
<script>
$(function () {  
	// 初始化 datepicker 对象
    var picker1 = $('#datetimepicker3').datetimepicker({  
        format: 'YYYY-MM-DD',  
        defaultDate:new Date(),
        locale: moment.locale('zh-cn'),  
        //minDate: '2016-7-1'  
    });  
    var picker2 = $('#datetimepicker4').datetimepicker({  
        format: 'YYYY-MM-DD',  
        defaultDate:new Date(),
        locale: moment.locale('zh-cn')  
    });  
    //动态设置最小值  
    picker1.on('dp.change', function (e) {  
    	alert("picker1 改变了时间!");
        picker2.data('DateTimePicker').minDate(e.date);  
    });  
    //动态设置最大值  
    picker2.on('dp.change', function (e) {  
        picker1.data('DateTimePicker').maxDate(e.date);  
    });  
    
    // 最后一个日期的监听事件
    $("#dp4").change(function(){
    	alert($(this).val());
    });
    
    // 绑定点击框的选定 click 事件
    $("#dp42").click(function(){
    	alert($("#dp4").val());
    })
});  
</script>


</body>
	
</html>
